<template>
  <div class="p10">
  <a-row :gutter="10">
    <a-col :md="4" :sm="24" class="leftH">
      <a-card :bordered="false">
        <div class="ant-leftTitle" >组织机构</div>
        <div style="background: #fff;height: 100%; margin-top: 5px; height:calc(100vh - 190px)">
          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入机构名称"/>
          <!-- 树-->
          <template v-if="departTree.length>0">
            <!--组织机构-->
            <a-tree
              showLine
              :selectedKeys="selectedKeys"
              :checkStrictly="true"
              @select="onSelect"
              :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
              :treeData="departTree"
              :loadData="onLoadData"
              :autoExpandParent="autoExpandParent"
              :expandedKeys="iExpandedKeys"
              @expand="onExpand"
              class="beauty-scroll" style="height:calc(100vh - 230px);overflow:auto"
            />
          </template>
          <div style="margin-top: 10px;" v-else-if="departTree.length==0">
            <h3><span>机构为空</span></h3>
          </div>
        </div>
      </a-card>
    </a-col>
    <a-col :md="20" :sm="24">
      <User-List ref="UserList" @clearSelectedDepartKeys="clearSelectedDepartKeys"></User-List>
    </a-col>
  </a-row>
  </div>
</template>
<script>
//import DeptBaseInfo from './modules/DeptBaseInfo'
import UserList from './UserList'
import { queryDepartTreeList, searchByKeywords } from '@/api/api'
import {KsListMixin} from '@/mixins/KsListMixin'
//import DeptRoleInfo from './modules/DeptRoleInfo'

export default {
  name: 'DepartUserList',
  mixins: [KsListMixin],
  components: {
    UserList
  },
  data() {
    return {
      currentOrgId: '',
      iExpandedKeys: [],
      loading: false,
      autoExpandParent: true,
      disable: true,
      treeData: [],
      visible: false,
      departTree: [],
      rightClickSelectedKey: '',
      hiding: true,
      model: {},
      dropTrigger: '',
      depart: {},
      disableSubmit: false,
      checkedKeys: [],
      selectedKeys: [],
      autoIncr: 1,
      currSelected: {},
      form: this.$form.createForm(this),
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      graphDatasource: {
        nodes: [],
        edges: []
      },
      userIdentity:"",
    }
  },
  methods: {
    callback(key) {
    },
    loadData() {
    },
    clearSelectedDepartKeys() {
      this.checkedKeys = [];
      this.selectedKeys = [];
      this.currentOrgId = '';
      this.$refs.UserList.currentOrgId='';
    },
    onLoadData (treeNode) {
      return new Promise((resolve) => {
        const _this = this
        if (treeNode.dataRef.children) { // 有值了直接渲染
          resolve()
          return
        }
        // 没有值根据当前父节点获取下面子节点并挂在树节点中，添加到对应父节点的children中
        var param={};
        param.orgId = treeNode.dataRef.key;
        param.demId = 1;
        queryDepartTreeList(param).then((res) => {
          // eslint-disable-next-line no-debugger
          if ( res.success ) {
            treeNode.dataRef.children =  res.result
            _this.treeData = [..._this.treeData]
            _this.departTree = [..._this.departTree]
          }
        });
        resolve()
      })
    },
    loadTree(key) {
      var that = this
      that.treeData = []
      that.departTree = []
      var param={};
      param.id = key;
      queryDepartTreeList(param).then((res) => {
        if ( res.success ) {
          that.treeData = [... res.result]
          that.departTree = [... res.result]
          for (let i = 0; i <  res.result.length; i++) {
            let temp =  res.result[i]
            this.setThisExpandedKeys(temp)
          }
          this.loading = false
        }
        that.userIdentity = res.message
      })
    },
    setThisExpandedKeys(node) {
      //只展开一级目录
      this.iExpandedKeys.push(node.key)
    },
    refresh() {
      this.loading = true
      this.loadTree(0)
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSearch(value) {
      let that = this
      if (value) {
        searchByKeywords({keyWord: value}).then((res) => {
          if (res.success) {
            that.departTree = []
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.departTree.push(temp)
            }
          } else {
            that.$message.warning(res.message)
          }
        })
      } else {
        that.loadTree()
      }
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]];
      }
      let record = {};
      if(e.selected){
        record = e.node.dataRef;
      }else{
        record.id="";
      }
      this.checkedKeys.push(record.id);
      this.$refs.UserList.onClearSelected();
      this.$refs.UserList.open(record);
    }
  },
  created() {
    this.loadTree(0);
  },
}
</script>
